<template>
  <a-modal
    title="删除知识"
    class="edit-knowledge-modal"
    :width="800"
    :visible="visible"
    @ok="delKnowledge"
    @cancel="closeModal"
  >
    你确定要删除知识吗？
  </a-modal>
</template>
<script lang="ts">
import { defineComponent, inject, watch } from 'vue'
import { message } from 'ant-design-vue'
import common from '@/api/common'

export default defineComponent({
  emits: ['getContentList'],
  setup(props, content) {
    const knowledgeId = inject<any>('knowledgeId')
    const visible = inject<any>('delKnowledgeState')
    /**
     * 关闭窗口
     */
    const closeModal = inject<any>('closedelKnowledgeModal')
    watch(visible, async (now) => {
      if (now) {
        if (knowledgeId) {
          // 删除
          common.getKnowledgeDetail({ contentId: knowledgeId.value }).then(() => {})
        }
      }
    })

    const delKnowledge = () => {
      if (knowledgeId) {
        common.delContent({ contentId: knowledgeId.value }).then(() => {
          content.emit('getContentList')
          closeModal()
          message.success('删除成功')
        })
      }
    }
    return { knowledgeId, visible, closeModal, delKnowledge }
  }
})
</script>

<style lang="scss" scoped>
.edit-knowledge-modal {
  &-li {
    margin: 10px 0;
    display: flex;
    align-items: center;
    &-title {
      display: inline-block;
      width: 100px;
    }
  }
}
</style>
